<template>
  <div class="card-content">
    <div class="cardLeft" v-if="bleStatus == 3">
      {{ contentList[0].name }}
    </div>
    <div class="cardLeft" v-else>
      {{ contentList[bleStatus == 4 ? bleStatus - 1 : bleStatus].name }}
    </div>
    <!-- <button style="width: 50px; heigth: 30px" @click="sendInstruct">
      发送
    </button> -->
    <div class="cardRigth">
      <div
        class="reConnect"
        @click="handleClick"
        v-if="bleStatus == 0 || bleStatus == 3"
      >
        重新连接
      </div>
      <div v-if="bleStatus == 1">
        <span :class="['icon']"></span>
      </div>
      <div v-if="bleStatus == 2" @click="handlerOnchnge">
        <span :class="['iconOpen', 'ic_loadLinght']"></span>
      </div>
      <div v-if="bleStatus == 4" @click="handlerOnchnge">
        <span :class="['iconFlaseOpen', 'ic_loadLinght']"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import BleManage from "../pages/hilink/BleManage";
export default {
  data() {
    return {
      contentList: [
        {
          id: 0,
          name: "未连接",
        },
        {
          id: 1,
          name: "连接中",
        },
        {
          id: 2,
          name: "已开启",
        },
        {
          id: 3,
          name: "已关闭",
        },
      ],
    };
  },
  computed: mapState({
    bleStatus: (state) => state.ble.bleStatus,
    modeSelection: (state) => state.ble.modeSelection,
    // charactValueChangeRes: (state) => state.ble.charactValueChangeRes
    
  }),
  watch: {
    bleStatus(newV) {
      console.log("++++++蓝牙状态改变++++", newV);
      if (newV == 3) {
        this.$parent.$data.connectionFail = true;
      }
    },
  },
  methods: {
    ...mapMutations({ setBleSatuts: "ble/setBleSatuts" }),
    /**
     * 打印蓝牙状态
     */
    handlerOnchnge() {
      if (this.bleStatus == 4) {
        // let str = `F05504000E10${this.modeSelection == 0 ? '01' : '02'}01` + this.$getCheckSum(`F05504000E10${this.modeSelection == 0 ? '01' : '02'}01`);
       let str = "F05504000E100101" + this.$getCheckSum("F05504000E100101");
       window.bleManage.send(str);
      } else if (this.bleStatus == 2) {
        //  let str = `F05504000E10${this.modeSelection == 0 ? '01' : '02'}00` + this.$getCheckSum(`F05504000E10${this.modeSelection == 0 ? '01' : '02'}00`);
       let str = "F05504000E100100" + this.$getCheckSum("F05504000E100100");
       window.bleManage.send(str);
      }
    },
    /**
     * 发送指令
     */
    // sendInstruct() {
    //   // console.log("发送指令");
    //   // let str = "F0AA02001D2D";
    //   // let data = str + this.$getCheckSum(str);
    //   // console.log('=========================',this);

    //   // console.log("---------------------------", this.charactValueChangeRes.data);
    //   console.log(
    //     "设备关机指令",
    //     "F05504000E100100" + this.$getCheckSum("F05504000E100100")
    //   );
    //   let str = "F05504000E100100" + this.$getCheckSum("F05504000E100100");

    //   window.bleManage.send(str);
    // },

    /**
     * 重新连接
     */
    handleClick() {
      console.log("重新连接");
      this.setBleSatuts(1);
      let Ble = new BleManage();
      Ble.reConnectForAndroid;
      console.log(Ble.reConnectForAndroid);
      // BleManage.reConnectForAndroid();
    },
  },
};
</script>

<style lang="less">
.card-content:first-child {
  margin: 10px 16px;
}

.card-content {
  height: 88px;
  background: var(--bg_contrast);
  border-radius: 16px;
  display: flex;
  align-items: center;
  margin: 12px;
  justify-content: space-between;
  padding: 0 16px;
  .cardLeft {
    color: var(--font);
    font-size: 18px;
    font-family: HarmonyHeiTi;
    font-weight: 400;
  }
  .reConnect {
    color: var(--color_blue);
    font-size: 16px;
  }
  //    .card {
  //     display: flex;
  //     justify-content: space-around;
  //     align-items: center;

  //   }
}
</style>